<template>
<!--  <el-card shadow="hover" class="chat-card">-->
<!--    <div class="message-container">-->
<!--      <el-scrollbar ref="scrollbar" class="scroll-area">-->
<!--        <div v-for="(msg, index) in messages" :key="index">-->
<!--          <div :class="['message-bubble', msg.role]">-->
<!--            <el-tag v-if="msg.role === 'assistant'" type="info">AI</el-tag>-->
<!--            <div class="message-content">{{ msg.content }}</div>-->
<!--            <div class="message-time">{{ msg.time }}</div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-scrollbar>-->
<!--    </div>-->

<!--    <el-input-->
<!--        v-model="inputText"-->
<!--        type="textarea"-->
<!--        :rows="3"-->
<!--        placeholder="输入您的问题..."-->
<!--        @keyup.enter.native="handleSend"-->
<!--        class="input-area">-->
<!--      <el-button-->
<!--          slot="append"-->
<!--          icon="el-icon-position"-->
<!--          @click="handleSend"-->
<!--          :loading="isSending">-->
<!--        发送-->
<!--      </el-button>-->
<!--    <el-button>点击</el-button>-->
<!--    </el-input>-->
<!--  </el-card>-->

  <div class="chat-container">
    <!-- 头部 -->
    <el-header class="header">
      <h1>Chat-Robot</h1>
    </el-header>

    <!-- 侧边栏 -->
<!--    <el-aside width="250px" class="sidebar">-->
<!--      <div class="session-header">-->
<!--        <el-button-->
<!--            type="primary"-->
<!--            icon="el-icon-plus"-->
<!--            @click="createNewSession"-->
<!--        >-->
<!--          新建对话-->
<!--        </el-button>-->
<!--      </div>-->

<!--      <el-menu-->
<!--          :default-active="activeSessionId"-->
<!--          class="session-list"-->
<!--      >-->
<!--        <el-menu-item-->
<!--            v-for="session in sessions"-->
<!--            :key="session.id"-->
<!--            :index="session.id"-->
<!--            @click="switchSession(session.id)"-->
<!--        >-->
<!--          <span class="session-title">{{ session.title }}</span>-->
<!--          <span class="session-time">{{ session.lastTime }}</span>-->
<!--        </el-menu-item>-->
<!--      </el-menu>-->
<!--    </el-aside>-->

    <!-- 聊天内容区域 -->
    <el-main class="chat-main">
      <div
          class="message-list"
          ref="messageList"
      >
        <div
            v-for="(message, index) in messages"
            :key="index"
            :class="['message-item', message.role]"
        >
          <div class="message-content">
            <div class="message-header">
              <span class="role">{{ message.role === 'user' ? 'You' : 'AI' }}</span>
              <span class="time">{{ message.time }}</span>
            </div>
            <div class="message-text">
              {{ message.content }}
            </div>
          </div>
        </div>
      </div>
    </el-main>

    <!-- 输入区域 -->
    <el-footer class="input-area">
      <div class="input-container">
<!--        v-model="requestForm.message"-->
        <el-input
            v-model="requestForm.message"
            type="textarea"
            :rows="2"
            placeholder="Ask me anything..."
            @keyup.enter.native="handleSend"
        ></el-input>
        <el-button
            type="primary"
            class="send-btn"
            @click="handleSend"
        >
          Send
        </el-button>
      </div>
    </el-footer>
  </div>

</template>

<script>
import axios from "axios";
import { v4 as uuidv4 } from 'uuid'

export default {
  name: "ChatWindow.vue",
  data() {
    return {
      messages: [],
      requestForm:{
        message: '',
        sessionId:"12345"
      },
      inputText:'',
      loading: false,
      sessions: [],
      activeSessionId: null,
    }
  },
  // computed: {
  //   amessages() {
  //     const session = this.sessions.find(s => s.id === this.activeSessionId)
  //     return session ? session.messages : []
  //   }
  // },
  // created() {
  //   this.loadSessions()
  //   if (this.sessions.length === 0) {
  //     this.createNewSession()
  //   } else {
  //     this.activeSessionId = this.sessions[0].id
  //   }
  // },
  methods: {
    handleSend() {
      // if (!this.inputText.trim()) return
      this.addMessage('user',this.requestForm.message)
      axios.post('/api/chat/conversation',this.requestForm
      //     {
      //       headers: {
      //         'Content-Type': 'application/json' // 显式声明JSON格式‌:ml-citation{ref="2,4" data="citationList"}
      //       }
      // }
      ).then(response =>{
         console.log(response.data.response)
        setTimeout(() => {
          this.addMessage('assistant',response.data.response)
        }, 1000)
      })
      this.requestForm.message='';
      // 添加用户消息
      // 模拟AI回复
      // this.inputText = ''
    },
    addMessage(role, content) {
      this.messages.push({
        role,
        content,
        time: new Date().toLocaleTimeString()
      })
      this.scrollToBottom()
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.messageList
        container.scrollTop = container.scrollHeight
      })
    },
    // deleteSession(sessionId) {
    //   this.sessions = this.sessions.filter(s => s.id !== sessionId)
    //   if (this.activeSessionId === sessionId && this.sessions.length > 0) {
    //     this.activeSessionId = this.sessions[0].id
    //   }
    //   this.saveSessions()
    // },
    //
    // renameSession(newTitle) {
    //   const session = this.sessions.find(s => s.id === this.activeSessionId)
    //   if (session) {
    //     session.title = newTitle
    //     this.saveSessions()
    //   }
    // },
    // 创建新对话
    // createNewSession() {
    //   const newSession = {
    //     id: uuidv4(),
    //     title: '新对话',
    //     messages: [],
    //     lastTime: new Date().toLocaleString()
    //   }
    //   this.sessions.unshift(newSession)
    //   this.activeSessionId = newSession.id
    //   this.saveSessions()
    // },
    // //
    // // // 切换对话
    // switchSession(sessionId) {
    //   this.activeSessionId = sessionId
    // },
    // // // 修改后的发送消息方法
    // handleSend() {
    //   if (!this.inputText.trim()) return
    //
    //   const session = this.sessions.find(s => s.id === this.activeSessionId)
    //
    //   // 添加用户消息
    //   session.messages.push({
    //     role: 'user',
    //     content: this.inputText,
    //     time: new Date().toLocaleTimeString()
    //   })
    //
    //   // 自动生成标题（第一条消息作为标题）
    //   if (session.messages.length === 1) {
    //     session.title = this.inputText.substring(0, 20) + '...'
    //   }
    //   // 模拟AI回复
    //   setTimeout(() => {
    //     session.messages.push({
    //       role: 'assistant',
    //       content: 'This is a sample response from AI.',
    //       time: new Date().toLocaleTimeString()
    //     })
    //     session.lastTime = new Date().toLocaleString()
    //     this.saveSessions()
    //     this.scrollToBottom()
    //   }, 1000)
    //
    //   this.inputText = ''
    //   this.saveSessions()
    // },
    // // // 保存到本地存储
    // saveSessions() {
    //   localStorage.setItem('chatSessions', JSON.stringify(this.sessions))
    // },
    // //
    // // // 从本地加载
    // loadSessions() {
    //   const data = localStorage.getItem('chatSessions')
    //   if (data) {
    //     this.sessions = JSON.parse(data)
    //   }
    // },
  }
}
</script>


<style scoped>
.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background: #2c3e50;
  color: white;
  display: flex;
  align-items: center;
}

.chat-main {
  flex: 1;
  padding: 20px;
  overflow: hidden;
}

.message-list {
  height: 100%;
  overflow-y: auto;
  padding: 10px;
}

.message-item {
  margin: 15px 0;
  display: flex;
}

.message-item.user {
  justify-content: flex-end;
}

.message-content {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 8px;
  background: #f5f7fa;
  position: relative;
}

.message-item.user .message-content {
  background: #409EFF;
  color: white;
}

.message-header {
  font-size: 12px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  opacity: 0.8;
}

.message-item.user .message-header {
  color: rgba(255, 255, 255, 0.8);
}

.input-area {
  padding: 20px;
  border-top: 1px solid #ebeef5;
}

.input-container {
  display: flex;
  gap: 10px;
}

.send-btn {
  height: auto;
  align-self: flex-end;
}

.message-text {
  line-height: 1.5;
  white-space: pre-wrap;
}
pre {
  background: #f8f8f8;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
}

code {
  font-family: 'Fira Code', monospace;
  font-size: 14px;
}
.app-container {
  display: flex;
  height: 100vh;
}

.sidebar {
  border-right: 1px solid #e6e6e6;
  background: #fafafa;
}

.session-header {
  padding: 15px;
  border-bottom: 1px solid #e6e6e6;
}

.session-list {
  border-right: none;
}

.session-title {
  display: block;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-time {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>